<!DOCTYPE html>
<html lang="en">

<head>
    <title>Weather widget</title>
    <script src="/feather.min.js"></script>
    <link rel="stylesheet" href="/style.css">
</head>

<body>
    <div class="container">
        <div class="weather-side">
            <div class="weather-gradient"></div>
            <div class="date-container">
                <h2 class="date-dayname">{day}</h2><span class="date-day">{date}</span><i class="location-icon"
                    data-feather="map-pin"></i><span class="location">{city}</span>
            </div>
            <div class="weather-container"><i class="weather-icon" data-feather="sun"></i>
                <h1 class="weather-temp">{temp}°{{if is_metric}}C{{else}}F{{endif}}</h1>
                <h3 class="weather-desc">{description}</h3>
            </div>
        </div>
        <div class="info-side">
            <div class="today-info-container">
                <div class="today-info">
                    <div class="precipitation"> <span class="title">PRECIPITATION</span><span class="value">{rain}
                            MM</span>
                        <div class="clear"></div>
                    </div>
                    <div class="humidity"> <span class="title">HUMIDITY</span><span class="value">{humidity} %</span>
                        <div class="clear"></div>
                    </div>
                    {{if is_metric}}
                    <div class="wind"> <span class="title">WIND</span><span class="value">{wind} km/h</span>
                        {{else}}
                        <div class="wind"> <span class="title">WIND</span><span class="value">{wind} mph</span>
                            {{endif}}
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                <div class="week-container">
                    <ul class="week-list">
                        <li class="active">
                            <i class="day-icon" data-feather="sun"></i>
                            <span class="day-name">{day_short}</span>
                            <span class="day-temp">{temp}°{{if is_metric}}C{{else}}F{{endif}}</span>
                        </li>
                        {{ for day in next_days }}
                        <li>
                            <i class="day-icon" data-feather="{day.icon}"></i>
                            <span class="day-name">{day.day}</span>
                            <span class="day-temp">{day.temp}°{{if is_metric}}C{{else}}F{{endif}}</span>
                        </li>
                        {{ endfor }}
                        <div class="clear"></div>
                    </ul>
                </div>
                <div class="location-container">
                    <button onclick="location.href='?units={{if is_metric}}imperial{{else}}metric{{endif}}';" class="location-button">
                        <i data-feather="thermometer"></i><span>Switch units</span></a>
                </div>
            </div>
        </div>
        <script>
            feather.replace()
        </script>

</body>

</html>
